<template>
  <div class="home">
    <div class="topnav">
      <div class="logo">
        <img src="../assets/map/yuzhanhongtu2.png" />
      </div>
      <div class="btn">
        <el-button @click="toTabao">文创推荐</el-button>
        <el-button @click="toAnswer">答题入口</el-button>
        <!-- <el-button @click="toFeedback">系统反馈</el-button> -->
        <el-button @click="toAdmin">后台</el-button>
        <img
          class="return"
          @click="rebackMap"
          v-show="isreturn"
          src="@/assets/return.svg"
          alt=""
          style="z-index: 999; position: absolute; left: -50px; top: -3px"
        />
      </div>
    </div>
    <div class="map" style="position: relative">
      <div id="map" style="height: 100%"></div>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="75%">
      <el-table :data="dialogList" border style="width: 100%">
        <el-table-column prop="position_name" label="阵地名称" align="center" />
        <el-table-column
          prop="position_intro"
          label="阵地简介"
          align="center"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="default"
              size="small"
              @click.prevent="toDetails(scope.$index)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" style="color: #000000"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import cityExport from "../assets/map/cityExport.js";
import * as echarts from "echarts";
import { getAll } from "../api/territoryManagement.js";
import { formatter } from "element-plus";
export default {
  data() {
    return {
      onProvice: true,
      dialogTitle: "", //弹窗标题
      dialogList: [],
      clickProvice: "",
      dialogVisible: false, //弹窗显示
      isreturn: false, // 是否显示返回全国地图按钮
      mapChart: null, //地图对象
      mapOption: null, //地图属性
      infoList: [], //获取数据
      dataList: [
        //地图标记经纬度坐标和code码,可只要经纬度
        // { name: "布达拉宫", value: [91.23, 29.5, 2333] },
        // { name: "黑河", value: [128.03, 47.01, 1007] },
      ],
    };
  },
  name: "HomeView",
  components: {},
  mounted() {
    this.getData();
  },
  methods: {
    mapClick() {
      this.mapChart.on("click", (params) => {
        let provinceName = params.name;
        if (this.onProvice) {
          // 获取点击的省份名称
          this.clickProvice = provinceName;
        }
        this.onProvice = false;
        // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
        this.dataList.map((item) => {
          if (item.name == provinceName) {
            this.mapOption.series[0].data = [item];
          }
        });
        // 进入省级地图
        cityExport.cityList.map((value) => {
          if (value.name.indexOf(provinceName) !== -1) {
            this.mapChart.clear();
            this.mapOption.geo.map = "Pmap";
            this.$echarts.registerMap("Pmap", value.data);
            this.mapChart.setOption(this.mapOption);
            this.isreturn = true;
            //每个区阵地
            if (!this.onProvice) {
              this.mapChart.on("click", (params) => {
                let name = params.name;
                this.dialogTitle = name + "阵地";
                let this_ = this;
                let proviceList = this.infoList.filter((i) => {
                  return i.province.includes(this_.clickProvice);
                });
                this.dialogList = proviceList.filter((item) => {
                  return item.district.includes(name);
                });
                this.dialogVisible = true;
              });
            }
          }
        });
      });
    },
    async getData() {
      await getAll()
        .then((res) => {
          this.infoList = res;
        })
        .catch((error) => {});
      let this_ = this;
      this.infoList.forEach((item) => {
        let params = {
          name: item.position_name,
          value: item.coordinate.split(",").map(Number),
        };
        this_.dataList.push(params);
      });
      this.getMap();
    },
    getMap() {
      let mapbg = document.createElement("img");
      mapbg.src = require("../assets/980.jpg");
      //地图
      if (!this.mapChart) {
        this.mapChart = this.$echarts.init(document.getElementById("map"));
      }
      this.mapOption = {
        // 背景颜色
        // backgroundColor: "#00264e",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
        },
        map: "china",
        roam: true, //是否启缩放和平移
        scaleLimit: {
          min: 1,
          max: 5,
        },
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "#fff",
          },
        },
        // 地图配置
        geo: {
          map: "china",

          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "rgb(202,6,7)",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#eee",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#ccc",
              borderWidth: 1,
              areaColor: {
                image: mapbg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                repeat: "repeat", // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
              },
              // areaColor: "rgb(202,6,7)",
              shadowColor: "#457b9d",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "rgb(202,6,7)",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "阵地",
            coordinateSystem: "geo",
            type: "scatter",
            tooltip: {
              show: true,
              textStyle: {
                color: "#DADADA",
                fontSize: "12",
                width: 20,
                height: 30,
                overflow: "break",
              },
              formatter: function (params) {
                let value =
                  params.data.value[2] == undefined
                    ? "暂无评分"
                    : params.data.value[2];
                return "阵地: " + params.data.name + "<br>评分: " + value;
              },
            },
            geoIndex: 0,
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: "rgb(202,6,7)",
              },
            },
            symbol:
              "path://M546.9696 55.7056l124.5184 252.3136a38.89664 38.89664 0 0 0 29.3376 21.2992l278.4256 40.448c31.9488 4.6592 44.7488 43.9296 21.6064 66.4576l-201.472 196.4032a39.10656 39.10656 0 0 0-11.2128 34.5088l47.5648 277.2992c5.4784 31.8464-27.9552 56.1152-56.5248 41.0624l-249.0368-130.9184a38.8096 38.8096 0 0 0-36.2496 0l-249.0368 130.9184c-28.5696 15.0528-62.0032-9.2672-56.5248-41.0624l47.5648-277.2992c2.1504-12.6464-2.048-25.5488-11.2128-34.5088L23.1936 436.224C0.0512 413.696 12.8 374.3744 44.8 369.7664l278.4256-40.448a39.0144 39.0144 0 0 0 29.3376-21.2992l124.5184-252.3136c14.2848-28.9792 55.552-28.9792 69.888 0z",
            data: this.dataList,
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$echarts.registerMap("china", cityExport.china);
      this.mapChart.setOption(this.mapOption);
      //地图点位点击事件
      this.mapClick();
      window.addEventListener("resize", () => {
        this.mapChart.resize();
      });
    },
    rebackMap() {
      //返回全国地图
      this.mapChart.clear();
      this.mapOption.series[0].data = this.dataList; //重新标记
      this.mapOption.geo.map = "china";
      this.$echarts.registerMap("china", cityExport.china);
      this.mapChart.setOption(this.mapOption);
      this.isreturn = false;
      this.onProvice = false;
      this.mapChart.off("click"); //先移除点击时间，再点击
      this.mapClick();
    },
    toAdmin() {
      this.$router.push({ name: "TerritoryManagement" });
    },
    toTabao() {
      this.$router.push({
        name: "product",
      });
      // window.open(
      //   "https://gugong1925.jiyoujia.com/shop/view_shop.htm?spm=pc_detail.27183998/evo401271b517998.202202.1.5a6f7dd63RacXu",
      //   "_blank"
      // );
    },

    // 跳转详情页
    toDetails(index) {
      this.$router.push({
        name: "details",
        query: this.dialogList[index],
      });
    },

    // 反馈
    toFeedback() {},
    // 答题入口
    toAnswer() {
      this.$router.push({ name: "answer" });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100vh;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;
  .topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    .logo {
      width: 500px;
      z-index: 999;
      background-size: 45%;
      img {
        position: absolute;
        width: 550px;
        height: 250px;
      }
    }

    /deep/ .el-button {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
    .btn {
      position: relative;
    }
    .return {
      width: 40px;
      height: 40px;
    }
  }
  .map {
    width: 100%;
    flex: 1;
    background-size: cover;
    /* background-color: rgb(rgb(197, 37, 37)); */
  }
  .positionList {
    display: flex;
    height: 10%;
    justify-content: space-between;
  }
  /deep/ .cell {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
</style>
